<template>
  <div>
    <!--tab!-->
    <div>
      <div class="tab_container">
        <el-tabs :tab-position="tabPosition" style="height: 300px; margin-right: 30px; background-color: ghostwhite;">
          <el-tab-pane>
            <div slot="label">
              <div class="tab_out">
                <div class="tab1" style="height: 100px;">
                  <p class="live-date  hover-active">今天</p>
                  <p class="live-time hover-active">19:30</p>
                </div>
                <div class="tab2" style="height: 100px;">
                  <p class="section-name hover-active">大连海事（深圳项目）MBA线上宣讲</p>
                  <p class="buy-cnt hover-active">228人已购</p>
                </div>
              </div>
            </div>

            <div class="tab_show-live-detail">
              <div class="tab_show_top">
                <p class="top_section-name">天津大学MBA（深圳）</p>
                <p class="top_live-time">距离直播还剩3天 03:09:52</p>
                <el-row class="tab_enter-btn">
                  <el-button round>即将开播</el-button>
                  </el-row>
              </div>
              <div class="tab_ivu-row">
                <div class="tab_teacher-info">
                  <img src="https://file.mbadashi.com/image/20210519150743715_297X325.jpg" alt="" class="tab_teach-avatar">
                  <span></span>
                </div>
                <div class="tab_relation-course">
                  <label>来自课程：</label>
                  <span style="color: #000000;">
                    <router-link to="/detail" class="tab_link_a" style="color: royalblue">5月24日天津大学（深圳）</router-link>
                  </span>
                  <!--                    <a href="/my_course/choiceLesson#/choiceLesson" class="tab_link_a">5月24日天津大学（深圳） </a> -->
                </div>
              </div>
            </div>

          </el-tab-pane>
          <el-tab-pane>
            <div slot="label">
              <div class="tab_out">
                <div class="tab1" style="height: 100px;">
                  <p class="live-date  hover-active">今天</p>
                  <p class="live-time hover-active">19:30</p>
                </div>
                <div class="tab2" style="height: 100px;">
                  <p class="section-name hover-active">大连海事（深圳项目）MBA线上宣讲</p>
                  <p class="buy-cnt hover-active">228人已购</p>
                </div>
              </div>
            </div>

            <div class="tab_show-live-detail">
              <div class="tab_show_top">
                <p class="top_section-name">天津大学MBA（深圳）</p>
                <p class="top_live-time">距离直播还剩3天 03:09:52</p>
                <el-row class="tab_enter-btn">
                  <el-button round>即将开播</el-button>
                  </el-row>
              </div>
              <div class="tab_ivu-row">
                <div class="tab_teacher-info">
                  <img src="https://file.mbadashi.com/image/20210519150743715_297X325.jpg" alt="" class="tab_teach-avatar">
                  <span></span>
                </div>
                <div class="tab_relation-course">
                  <label>来自课程：</label>
                  <span style="color: #000000;">
                    <router-link to="/detail" class="tab_link_a" style="color: royalblue">5月24日天津大学（深圳）</router-link>
                  </span>
                  <!--                    <a href="/my_course/choiceLesson#/choiceLesson" class="tab_link_a">5月24日天津大学（深圳） </a> -->
                </div>
              </div>
            </div>

          </el-tab-pane>
          <el-tab-pane>
            <div slot="label">
              <div class="tab_out">
                <div class="tab1" style="height: 100px;">
                  <p class="live-date  hover-active">今天</p>
                  <p class="live-time hover-active">19:30</p>
                </div>
                <div class="tab2" style="height: 100px;">
                  <p class="section-name hover-active">大连海事（深圳项目）MBA线上宣讲</p>
                  <p class="buy-cnt hover-active">228人已购</p>
                </div>
              </div>
            </div>

            <div class="tab_show-live-detail">
              <div class="tab_show_top">
                <p class="top_section-name">天津大学MBA（深圳）</p>
                <p class="top_live-time">距离直播还剩3天 03:09:52</p>
                <el-row class="tab_enter-btn">
                  <el-button round>即将开播</el-button>
                  </el-row>
              </div>
              <div class="tab_ivu-row">
                <div class="tab_teacher-info">
                  <img src="https://file.mbadashi.com/image/20210519150743715_297X325.jpg" alt="" class="tab_teach-avatar">
                  <span></span>
                </div>
                <div class="tab_relation-course">
                  <label>来自课程：</label>
                  <span style="color: #000000;">
                    <router-link to="/detail" class="tab_link_a" style="color: royalblue">5月24日天津大学（深圳）</router-link>
                  </span>
                  <!--                    <a href="/my_course/choiceLesson#/choiceLesson" class="tab_link_a">5月24日天津大学（深圳） </a> -->
                </div>
              </div>
            </div>

          </el-tab-pane>
          <el-tab-pane>
            <div slot="label">
              <div class="tab_out">
                <div class="tab1" style="height: 100px;">
                  <p class="live-date  hover-active">今天</p>
                  <p class="live-time hover-active">19:30</p>
                </div>
                <div class="tab2" style="height: 100px;">
                  <p class="section-name hover-active">大连海事（深圳项目）MBA线上宣讲</p>
                  <p class="buy-cnt hover-active">228人已购</p>
                </div>
              </div>
            </div>

            <div class="tab_show-live-detail">
              <div class="tab_show_top">
                <p class="top_section-name">天津大学MBA（深圳）</p>
                <p class="top_live-time">距离直播还剩3天 03:09:52</p>
                <el-row class="tab_enter-btn">
                  <el-button round>即将开播</el-button>
                  </el-row>
              </div>
              <div class="tab_ivu-row">
                <div class="tab_teacher-info">
                  <img src="https://file.mbadashi.com/image/20210519150743715_297X325.jpg" alt="" class="tab_teach-avatar">
                  <span></span>
                </div>
                <div class="tab_relation-course">
                  <label>来自课程：</label>
                  <span style="color: #000000;">
                    <router-link to="/detail" class="tab_link_a" style="color: royalblue">5月24日天津大学（深圳）</router-link>
                  </span>
                  <!--                    <a href="/my_course/choiceLesson#/choiceLesson" class="tab_link_a">5月24日天津大学（深圳） </a> -->
                </div>
              </div>
            </div>

          </el-tab-pane>
        </el-tabs>
      </div>

    </div>
  </div>
</template>
<script>
  export default {
    name: "tabs",
    components: {

    },
    data() {
      return {
        tabPosition: 'right'

      }
    }

  }
</script>
<style scoped>
  /*
tab
*/
  .tab_container {
    /*  background-color: cadetblue; */
  }

  .tab_container>>>.el-tabs__item {
    height: 100px !important;
   width: 700px !important;

/*       background-color: #FF0000 !important; */
  }

  .tab_out {
    display: flex;

  }

  .tab_out:hover {
    background-color: whitesmoke;
  }

  .tab1 {
    /*    background-color: #4169E1; */
    display: flex;
    flex-direction: column;
    width: 100px;
    height: 80px;
  }

  .tab2 {
    /*    background-color: #FF6600; */
    width: 300px;
  }


  .tab_show-live-detail {
    background-color: #4169E1;
    height: 400px;
    padding-top: 50px;
  }

  .tab_teach-avatar {
    height: 50px;
    font-weight: 50px;
  }

  .tab_show_top {
/*    background-color: #008000; */
    padding-left: 100px;


  }
.tab_enter-btn{
      padding-left: 100px;
}


  .tab_link_a {
    text-decoration: none;
    color: green;
  }
  .tab_ivu-row {
    background-color: white;
    margin-top: 50px;
    display: flex;
  }
  .tab_teacher-info{


  }
  .tab_relation-course{
    padding-left: 50px;
    padding-top: 20px;

  }
  .top_section-name {
    font-size: 30px;
    color: white;
  }

  .top_live-time {
    padding-top: 20px;
    padding-bottom: 20px;
    color: #F5F5F5;
  }

</style>
